<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <el-card class="box-card">

      <div slot="header" class="clearfix">
        标的选定
      </div>
      <el-input v-model="dm" placeholder="请输入代码"></el-input>
    </el-card>
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="资金流" name="first">
          <el-button @click="zlzjzs">主力资金走势</el-button>
          <el-button>默认按钮</el-button>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card class="box-card2">
      <div style="border: 1px solid red;width: 1080px;height:500px;" id="main1"></div>
    </el-card>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      //https://www.mairui.club/hsdata.html
      //http://api.mairui.club/hsmy/zhlrt/股票代码(如000001)/您的licence
      //最近10天资金流入趋势
      //http://api.mairui.club/hsmy/jddxt/股票代码(如000001)/您的licence
      //最近10天主力流入趋势
      activeName: 'second',
      licence: "2BAF4657-25C7-4A32-97CC-FED699F0CF6C",
      dm: '600186',
      zlzjlist: []
    }
  },
  created() {
    // this.init()
  },
  mountend() {
    //this.init()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //主力资金走势
    zlzjzs() {
      let dm = this.dm
      let licence = this.licence
      axios({
        //https://www.mairui.club/hsdata.html
        method: 'get',
        //http://api.mairui.club/hsmy/zlzj/股票代码(如000001)/您的licence 主力资金
        url: `http://api1.mairui.club/hsmy/jddxt/${dm}/${licence}`,
        //url: `http://api.mairui.club/hsmy/jddxt/${dm}/${licence}`,
        headers: {
          'Content-Type': 'application/json'
        }, // axios会自动将数据转换为JSON格式  
      })
        .then(response => {
          this.zlzjlist = response.data
          console.log('主力资金', this.zlzjlist); // 处理响应数据 
          this.init()
          // initZlEcharts()
        })
        .catch(error => {
          console.error('Error:', error); // 处理错误  
        });
    },
    init() {
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;
      console.log('主力资金echart', this.zlzjlist); // 处理响应数据 
      const dataCount = 5e5;
      const data = this.getxmap(this.zlzjlist);
      // const lrzj = this.getlrzjmap(this.zlzjlist);
      // const lczj = this.getlczjmap(this.zlzjlist);
      const jlr3 = this.getjlr3map(this.zlzjlist);
      const jlr5 = this.getjlr5map(this.zlzjlist);
      const jlr10 = this.getjlr10map(this.zlzjlist);
      option = {
        color: ['red', 'green', 'yellow'],
        // toolbox: {
        //   feature: {
        //     dataZoom: {
        //       yAxisIndex: false
        //     },
        //     saveAsImage: {
        //       pixelRatio: 2
        //     }
        //   }
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        legend: {
          top: '5%', // 控制 板块控制器的位置
          right: 'center',
          // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          // itemWidth: 10,  // 设置宽度
          // itemHeight: 4, // 设置高度
          itemGap: 40, // 设置两个legend之间的间距
          data: [
            {
              name: '3',  // 这个name需要和 series 里面的 name 对应起来
              // textStyle: {
              //   color: '#2DC3FB' // 单独设置某一个图列的颜色
              // }
            },
            {
              name: '5',  // 这个name需要和 series 里面的 name 对应起来
              // textStyle: {
              //   color: '#FDD43C' // 单独设置某一个图列的颜色
              // }
            },
            {
              name: '10',  // 这个name需要和 series 里面的 name 对应起来
              // textStyle: {
              //   color: '#FDD43C' // 单独设置某一个图列的颜色
              // }
            },
          ]
        },
        grid: {
          bottom: 90
        },
        dataZoom: [
          {
            show: true,
            start: 94,
            end: 100
          },
          {
            type: 'inside',
            start: 94,
            end: 100
          },
          {
            show: true,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 30,
            height: '80%',
            showDataShadow: false,
            left: '93%'
          }
        ],
        xAxis: {
          data: data,
          silent: false,
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          }
        },
        yAxis: {
          splitArea: {
            show: false
          }
        },
        series: [
          // {
          //   name: '流入',
          //   type: 'bar',
          //   data: lrzj
          // },
          // {
          //   name: '流出',
          //   type: 'bar',
          //   data: lczj
          // },
          {
            name: '3',
            type: 'bar',
            data: jlr3,
            barWidth: '5%',
          },
          {
            name: '5',
            type: 'bar',
            data: jlr5,
            barWidth: '5%',
          },
          {
            name: '10',
            type: 'bar',
            data: jlr10,
            barWidth: '5%',
          },
        ]
      };

      option && myChart.setOption(option);

    },
    getxmap(list) {
      let x = [];
      list.forEach(element => {
        x.push(element.t.substring(5, 10))
      });
      return x
    },
    //流入主力
    getlrzjmap(list) {
      let x = [];
      list.forEach(element => {
        x.push(element.lrzj)
      });
      return x
    },
    //流出主力
    getlczjmap(list) {
      let x = [];
      list.forEach(element => {
        x.push(element.lczj)
      });
      return x
    },
    //流出主力
    getjlr3map(list) {
      let x = [];
      list.forEach(element => {
        x.push(element.jlr3)
      });
      return x
    },
    //流出主力
    getjlr5map(list) {
      let x = [];
      list.forEach(element => {
        x.push(element.jlr5)
      });
      return x
    },
    //流出主力
    getjlr10map(list) {
      let x = [];
      list.forEach(element => {
        x.push(element.jlr10)
      });
      return x
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.box-card {
  width: 480px;
}

.box-card2 {
  width: 1080px;
  height: 600px;
}
</style>
